<!-- views/chatgpt.vue -->
<!-- 打包成安卓应用可以参考：https://blog.csdn.net/ygzrsno/article/details/118327722 -->
<template>
	<div id="app" style="display: flex;flex-flow: column;">
		<scroll-view scroll-with-animation scroll-y="true" style="width: 100%;">
			<!-- 用来获取消息体高度 -->
			<view id="okk" scroll-with-animation>
				<!-- 消息 -->
				<view v-for="(x,i) in msgList" :key="i">
					<!-- 用户消息-->
					<view v-if="x.my" style="display: flex;flex-direction: column;align-items: flex-end;margin: 20rpx;">
						<view>
							<view
								style="border-radius: 25rpx;background-color:#f9f9f9;color:#7f1111;display: flex;justify-content: flex-end;">
								<text class="font2" style="word-break: break-all;">{{x.msg}}</text>
							</view>
						</view>
					</view>
					<!-- 机器人消息 -->
					<view v-if="!x.my" style="display: flex;flex-direction: row;align-items: flex-start;">
						<view>
							<view style="border-radius: 25rpx;background-color: #f9f9f9;">
								<text class="chat font1">
									{{x.msg}}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			</view>
			</view>

			<view style="height: 600rpx;width: 100%;">

			</view>




		</scroll-view>
		<!-- 底部导航栏 -->
		<view class="buto">
			<input v-model="URL" v-show="show1" type="text"
				style="width: 95%;display: block;height: 45px;border-radius: 10px;background-color: #f0f0f0;margin-top: 20rpx;"
				placeholder-class="my-neirong-sm" placeholder="设置你的URL地址" />

			<input v-show="show" v-model="api" type="text"
				style="width: 95%;height: 45px;border-radius: 10px;background-color: #f0f0f0;display: block;margin: 20rpx;"
				placeholder-class="my-neirong-sm" placeholder="在此输入key。。。" />


			<input v-on:keyup.enter="sendMsg" v-model="msg" type="text"
				style="width: 95%;display: block;height: 45px;border-radius: 10px;background-color: #f0f0f0;margin-top: 20rpx;"
				@confirm="sendMsg" confirm-type="search" placeholder-class="my-neirong-sm"
				placeholder="用一句简短的话描述您的问题" />

			<button @click="sendMsg" :disabled="msgLoad"
				style="height: 45px;width: 60%;color: #030303;border-radius: 2500px;font-size: 35rpx;margin-top: 20rpx;background-color: aliceblue;">{{sentext}}</button>

			<button v-show="show" @click="entapi"
				style="height: 45px;width: 60%;color: #030303;border-radius: 2500px;font-size: 35rpx;margin:20rpx;">{{sentext1}}</button>
		</view>
	</div>






</template>
<!-- <script src="@/utils/js/prism.js"></script> -->
<script>
	export default {
		name: 'ChatGPT',
		data() {
			return {
				show1: false,
				show: false,
				api: '',
				type: 'text',
				msgLoad: false,
				anData: {},
				sentext: '点击发送',
				sentext1: '设置Key',

				animationData: {},
				showTow: false,
				URL: '服务器地址如：http:114.134.82.24:8085',
				msgList: [{
					my: false,
					msg: "你好我是chatGPT,请问有什么问题可以帮助您?"
				}],
				msgContent: "",
				msg: ""
			}
		},
		created() {
			if (uni.getStorageSync("URL") == '') {
				this.show1 = true
			}
			if (uni.getStorageSync("api") == '') {
				this.show = true
			}
		},
		methods: {
			entapi() {
				let that = this
				if (that.URL == '') {
					that.sentext1 = "先设置你的URL地址"
					return 0;
				}
				if (uni.getStorageSync("URL") != '') {
					uni.setStorage({
						data: uni.getStorageSync("URL"),
						key: "URL",
						success: function() {
							console.log('URL缓存本地');
						}
					})
				} else {
					uni.setStorage({
						data: that.URL,
						key: "URL",
						success: function() {
							console.log('URL缓存本地');
						}
					})
				}
				uni.setStorage({
					data: that.api,
					key: "api",
					success: function() {
						console.log('api缓存本地');
					}
				})
				console.log('11');
				that.sentext1 = 'api检测中'
				uni.request({
					url: uni.getStorageSync("URL") + '/setKey', //仅为示例，并非真实接口地址。
					method: 'POST', // 请求方式，默认为GET
					data: {
						key: that.api
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' // 设置请求头为表单格式
					},
					success: (res) => {
						console.log(res);
						that.sentext1 = '配置成功,不要删除';
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			sendMsg() {
				let that = this
				// 消息为空不做任何操作
				if (that.msg == "") {
					return 0;
				}
				that.sentext = '请求中'
				that.msgList.push({
					"msg": that.msg,
					"my": true
				})
				console.log(that.msg);
				that.msgContent += ('YOU:' + this.msg + "\n")
				that.msgLoad = true
				// 调用uni.request方法，传入一个包含url、data和header参数的配置对象
				uni.request({
					url: uni.getStorageSync("URL") + '/chat', // 请求地址
					data: { // 请求参数
						message: that.msg
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' // 设置请求头为表单格式
					},
					method: 'GET', // 请求方式，默认为GET
					success: (res) => {
						// 处理响应数据
						console.log(res.data);
						let text = res.data
						that.msgList.push({
							"msg": text,
							"my": false
						})
						that.msgContent += (text + "\n")
						that.msgLoad = false
						that.sentext = '发送'
					},
					fail: (err) => {
						// 处理错误信息
						console.log('error', err);
						console.log(err.code);
						that.sentext = '请求失败,重新输入问题发送'
						that.msgLoad = false
					}
				})
			},
		}
	}
</script>
<script lang="renderjs">
	export default {
		mounted() {},
		methods: {
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('entapi')
				ownerInstance.callMethod('sendMsg')
			}
		}
	}
</script>

<style>
	.chat {
		word-break: break-all;
		-webkit-touch-callout: all;
		-webkit-user-select: all;
		-moz-user-select: all;
		-ms-user-select: all;
		user-select: all;
	}

	.buto {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		margin-top: 20%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 600rpx;
		background-color: rgb(170, 85, 255);
		z-index: 1;
	}

	/* 渐变色字体 */
	.font1 {
		font-size: 28rpx;
		background-image: -webkit-linear-gradient(left top, rgb(170, 0, 255), rgb(255, 0, 0));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.font2 {
		font-size: 28rpx;
		background-image: -webkit-linear-gradient(left top, rgb(85, 0, 127), rgb(170, 85, 255));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>
